import React from 'react'
export class Header extends React.Component {
  state = {
    val: ''
  }
  render() {
    return (
      <>
        <header className='header'>
          <h1>todos</h1>
          <input value={this.state.val} onKeyDown={this.useKey} onChange={this.publish} className='new-todo' placeholder='What needs to be done?' autoFocus />
        </header>
      </>
    )
  }
  publish = (e) => {
    this.setState({
      val: e.target.value
    })
  }
  useKey = (e) => {
    if (e.key === "Enter" && this.state.val.trim()) {
      this.props.addList(this.state.val)
      this.setState({
        val: ''
      })
    }
  }
}